import { useState, useEffect, useRef } from 'react';
import { 
  Select, Button, Table, Card, Row, Col, 
  Typography, Tag, DatePicker, Space, Spin
} from 'antd';
// 从@ant-design/icons导入所有图标
import {

  InfoCircleOutlined, ExclamationCircleOutlined,
  TableOutlined
} from '@ant-design/icons';
import * as echarts from 'echarts';
import 'antd/dist/reset.css';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import relativeTime from 'dayjs/plugin/relativeTime';

// 配置dayjs
dayjs.locale('zh-cn');
dayjs.extend(relativeTime);

const { RangePicker } = DatePicker;
const { Title, Text, Paragraph } = Typography;
const { Option } = Select;

// 模拟数据
const doctorStatsData = [
  { name: '李员工', 正常排班: 18, 已调班: 3, 已取消: 1, 代班: 2, 总计: 24, 完成率: '95.8%' },
  { name: '陈员工', 正常排班: 16, 已调班: 2, 已取消: 2, 代班: 1, 总计: 21, 完成率: '90.5%' },
  { name: '赵员工', 正常排班: 14, 已调班: 4, 已取消: 1, 代班: 0, 总计: 19, 完成率: '94.7%' },
  { name: '王员工', 正常排班: 15, 已调班: 3, 已取消: 1, 代班: 1, 总计: 20, 完成率: '95.0%' },
  { name: '合计', 正常排班: 63, 已调班: 12, 已取消: 5, 代班: 4, 总计: 84, 完成率: '94.0%', isTotal: true }
];

// 服务项目统计数据
const projectStatsData = [
  { name: '常规检查', 正常排班: 32, 已调班: 5, 已取消: 2, 代班: 1, 总计: 40, 完成率: '95.0%' },
  { name: '专项治疗', 正常排班: 18, 已调班: 4, 已取消: 2, 代班: 2, 总计: 26, 完成率: '92.3%' },
  { name: '健康咨询', 正常排班: 13, 已调班: 3, 已取消: 1, 代班: 1, 总计: 18, 完成率: '94.4%' },
  { name: '合计', 正常排班: 63, 已调班: 12, 已取消: 5, 代班: 4, 总计: 84, 完成率: '94.0%', isTotal: true }
];

// 星期统计数据
const weekdayStatsData = [
  { name: '周一', 正常排班: 12, 已调班: 2, 已取消: 1, 代班: 1, 总计: 16, 完成率: '93.8%' },
  { name: '周二', 正常排班: 14, 已调班: 3, 已取消: 0, 代班: 0, 总计: 17, 完成率: '100.0%' },
  { name: '周三', 正常排班: 10, 已调班: 2, 已取消: 1, 代班: 1, 总计: 14, 完成率: '92.9%' },
  { name: '周四', 正常排班: 9, 已调班: 2, 已取消: 1, 代班: 0, 总计: 12, 完成率: '91.7%' },
  { name: '周五', 正常排班: 11, 已调班: 2, 已取消: 1, 代班: 1, 总计: 15, 完成率: '93.3%' },
  { name: '周六', 正常排班: 5, 已调班: 1, 已取消: 0, 代班: 0, 总计: 6, 完成率: '100.0%' },
  { name: '周日', 正常排班: 2, 已调班: 0, 已取消: 1, 代班: 1, 总计: 4, 完成率: '75.0%' },
  { name: '合计', 正常排班: 63, 已调班: 12, 已取消: 5, 代班: 4, 总计: 84, 完成率: '94.0%', isTotal: true }
];

const statusDistributionData = [
  { name: '正常排班', value: 62, color: '#10b981', textColor: '#059669' },
  { name: '已调班', value: 12, color: '#f59e0b', textColor: '#d97706' },
  { name: '已取消', value: 5, color: '#ef4444', textColor: '#dc2626' },
  { name: '代班', value: 4, color: '#3b82f6', textColor: '#2563eb' }
];

//排班历史中的历史统计模态框
const HistoryStatsModal = () => {
  const [period, setPeriod] = useState('month');
  const [dimension, setDimension] = useState('doctor');
  const [statsData, setStatsData] = useState(doctorStatsData);
  const [dateRange, setDateRange] = useState([
    dayjs('2023-06-01'),
    dayjs('2023-06-30')
  ]);
  const [loading, setLoading] = useState(false);
  const [chartData, setChartData] = useState({
    bar: [
      { name: '李员工', 次数: 24 },
      { name: '陈员工', 次数: 21 },
      { name: '赵员工', 次数: 18 },
      { name: '王员工', 次数: 20 }
    ],
    pie: statusDistributionData
  });
  
  // 图表容器引用
  const barChartRef = useRef(null);
  const pieChartRef = useRef(null);
  
  // 图表实例
  const barChartInstance = useRef(null);
  const pieChartInstance = useRef(null);

  // 根据维度获取标题
  const getDimensionTitle = () => {
    switch(dimension) {
      case 'doctor': return '员工';
      case 'project': return '服务项目';
      case 'weekday': return '星期';
      default: return '员工';
    }
  };

  // 表格列定义
  const columns = [
    {
      title: `${getDimensionTitle()}名称`,
      dataIndex: 'name',
      key: 'name',
      render: (text, record) => (
        <div style={{ display: 'flex', alignItems: 'center' }}>
          {dimension === 'doctor' && (
            <img 
              src={`https://picsum.photos/id/${[91, 33, 64, 22][doctorStatsData.findIndex(item => item.name === text)]}/32/32`} 
              alt={text} 
              style={{ width: 28, height: 28, borderRadius: '50%', marginRight: 8 }}
            />
          )}
          <Text>{text}</Text>
        </div>
      )
    },
    {
      title: '正常排班',
      dataIndex: '正常排班',
      key: '正常排班',
      render: (text) => <Text>{text}次</Text>
    },
    {
      title: '已调班',
      dataIndex: '已调班',
      key: '已调班',
      render: (text) => <Text>{text}次</Text>
    },
    {
      title: '已取消',
      dataIndex: '已取消',
      key: '已取消',
      render: (text) => <Text>{text}次</Text>
    },
    {
      title: '代班',
      dataIndex: '代班',
      key: '代班',
      render: (text) => <Text>{text}次</Text>
    },
    {
      title: '总计',
      dataIndex: '总计',
      key: '总计',
      render: (text, record) => (
        <Text strong={record.isTotal}>{text}次</Text>
      )
    },
    {
      title: '完成率',
      dataIndex: '完成率',
      key: '完成率',
      render: (text) => {
        const rate = parseFloat(text);
        let color = '#dcfce7';
        let textColor = '#166534';
        
        if (rate < 90) {
          color = '#fee2e2';
          textColor = '#dc2626';
        } else if (rate < 95) {
          color = '#fef3c7';
          textColor = '#d97706';
        }
        
        return (
          <Tag color={color} style={{ color: textColor, borderColor: color }}>
            {text}
          </Tag>
        );
      }
    }
  ];

  // 初始化图表
  useEffect(() => {
   
      initCharts();
    

  }, []);

  // 当维度或图表数据变化时更新图表
  useEffect(() => {
    if ((barChartInstance.current || pieChartInstance.current)) {
      updateCharts();
    }
  }, [dimension, chartData]);

  // 初始化图表
  const initCharts = () => {
    // 初始化柱状图
    if (barChartRef.current && !barChartInstance.current) {
      barChartInstance.current = echarts.init(barChartRef.current);
    }
    
    // 初始化饼图
    if (pieChartRef.current && !pieChartInstance.current) {
      pieChartInstance.current = echarts.init(pieChartRef.current);
    }
    
    updateCharts();
  };

  // 更新图表数据
  const updateCharts = () => {
    if (!barChartInstance.current || !pieChartInstance.current) return;
    
    // 更新柱状图
    const barOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' },
        backgroundColor: 'rgba(255, 255, 255, 0.9)',
        borderColor: '#eee',
        borderWidth: 1,
        textStyle: { color: '#333' },
        formatter: '{b}: {c}次'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: chartData.bar.map(item => item.name),
        axisLabel: {
          interval: 0
        }
      },
      yAxis: {
        type: 'value',
        minInterval: 1
      },
      series: [{
        data: chartData.bar.map(item => item.次数),
        type: 'bar',
        itemStyle: {
          color: '#3b82f6',
          borderRadius: [4, 4, 0, 0]
        },
        animationDuration: 800
      }]
    };
    barChartInstance.current.setOption(barOption);

    // 更新饼图
    const pieOption = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}次 ({d}%)',
        backgroundColor: 'rgba(255, 255, 255, 0.9)',
        borderColor: '#eee',
        borderWidth: 1,
        textStyle: { color: '#333' }
      },
      legend: {
        orient: 'horizontal',
        bottom: 0,
        textStyle: {
          fontSize: 12
        }
      },
      series: [{
        name: '排班状态',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 2,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: chartData.pie.map(item => ({
          name: item.name,
          value: item.value,
          itemStyle: {
            color: item.color
          },
          label: {
            color: item.textColor
          }
        })),
        animationDuration: 800
      }]
    };
    pieChartInstance.current.setOption(pieOption);
  };


  // 生成模拟数据
  const generateMockData = () => {
    let barData, statsData;
    
    switch(dimension) {
      case 'doctor':
        statsData = doctorStatsData;
        barData = [
          { name: '李员工', 次数: 24 },
          { name: '陈员工', 次数: 21 },
          { name: '赵员工', 次数: 18 },
          { name: '王员工', 次数: 20 }
        ];
        break;
      case 'project':
        statsData = projectStatsData;
        barData = [
          { name: '常规检查', 次数: 40 },
          { name: '专项治疗', 次数: 26 },
          { name: '健康咨询', 次数: 18 }
        ];
        break;
      case 'weekday':
        statsData = weekdayStatsData;
        barData = [
          { name: '周一', 次数: 16 },
          { name: '周二', 次数: 17 },
          { name: '周三', 次数: 14 },
          { name: '周四', 次数: 12 },
          { name: '周五', 次数: 15 },
          { name: '周六', 次数: 6 },
          { name: '周日', 次数: 4 }
        ];
        break;
      default:
        statsData = doctorStatsData;
        barData = [
          { name: '李员工', 次数: 24 },
          { name: '陈员工', 次数: 21 },
          { name: '赵员工', 次数: 18 },
          { name: '王员工', 次数: 20 }
        ];
    }
    
    return { statsData, barData };
  };

  // 更新统计数据
  const handleUpdateStats = () => {
    setLoading(true);
    
    // 模拟API请求延迟
    setTimeout(() => {
      const { statsData, barData } = generateMockData();
      
      setStatsData(statsData);
      setChartData({
        ...chartData,
        bar: barData
      });
      
      setLoading(false);
    }, 800);
  };

  

  // 当选择不同周期时重置日期范围
  useEffect(() => {
    let range;
    switch(period) {
      case 'month':
        range = [dayjs('2023-06-01'), dayjs('2023-06-30')];
        break;
      case 'quarter':
        range = [dayjs('2023-04-01'), dayjs('2023-06-30')];
        break;
      case 'halfyear':
        range = [dayjs('2023-01-01'), dayjs('2023-06-30')];
        break;
      default:
        return;
    }
    setDateRange(range);
  }, [period]);

  return (
     <div className="modal-box">
         <div style={{ padding: 24 }}>
        {/* 筛选条件 */}
        <Card 
          style={{ 
            marginBottom: 24, 
            backgroundColor: 'rgba(243, 244, 246, 0.3)',
            border: 'none'
          }}
        >
          <Row gutter={16}>
            <Col xs={24} md={8}>
              <Text strong style={{ display: 'block', marginBottom: 4, fontSize: 14 }}>统计周期</Text>
              <Select
                value={period}
                onChange={setPeriod}
                style={{ width: '100%' }}
                disabled={loading}
              >
                <Option value="month">月度统计（2023年6月）</Option>
                <Option value="quarter">季度统计（2023年Q2）</Option>
                <Option value="halfyear">半年度统计（2023年H1）</Option>
                <Option value="custom">自定义时间范围</Option>
              </Select>
              
              {period === 'custom' && (
                <Space style={{ marginTop: 12, width: '100%' }}>
                  <RangePicker
                    value={dateRange}
                    onChange={dates => setDateRange(dates)}
                    style={{ width: '100%' }}
                    disabled={loading}
                  />
                </Space>
              )}
            </Col>
            
            <Col xs={24} md={8}>
              <Text strong style={{ display: 'block', marginBottom: 4, fontSize: 14 }}>统计维度</Text>
              <Select
                value={dimension}
                onChange={setDimension}
                style={{ width: '100%' }}
                disabled={loading}
              >
                <Option value="doctor">按员工统计</Option>
                <Option value="project">按服务项目统计</Option>
                <Option value="weekday">按星期几统计</Option>
              </Select>
            </Col>
            
            <Col xs={24} md={8} style={{ display: 'flex', alignItems: 'flex-end' }}>
              <Button 
                type="primary" 
                style={{ width: '100%', backgroundColor: '#2F4F4F' }}
                onClick={handleUpdateStats}
                loading={loading}
              >
                更新统计
              </Button>
            </Col>
          </Row>
        </Card>

        {/* 图表区域 */}
        <Spin spinning={loading}>
          <Row gutter={24} style={{ marginBottom: 24 }}>
            {/* 柱状图 */}
            <Col xs={24} lg={12}>
              <Card title={`${getDimensionTitle()}排班次数统计（${dateRange[0].format('YYYY年MM月')}）`}>
                <div 
                  ref={barChartRef} 
                  style={{ height: 300, width: '100%' }}
                />
                <Paragraph 
                  style={{ 
                    textAlign: 'center', 
                    marginTop: 16, 
                    fontSize: 14, 
                    color: '#6b7280' 
                  }}
                >
                  统计说明：包含正常排班、代班，不包含已取消未补排的班次
                </Paragraph>
              </Card>
            </Col>

            {/* 饼图 */}
            <Col xs={24} lg={12}>
              <Card title="排班状态分布统计">
                <div 
                  ref={pieChartRef} 
                  style={{ height: 300, width: '100%', display: 'flex', justifyContent: 'center' }}
                />
              </Card>
            </Col>
          </Row>

          {/* 数据表格 */}
          <div>
            <Title level={5} style={{ marginBottom: 16, display: 'flex', alignItems: 'center' }}>
              <TableOutlined style={{ marginRight: 8, color: '#3b82f6' }} />
              详细统计数据
            </Title>
            <Table
              columns={columns}
              dataSource={statsData}
              pagination={false}
              rowClassName={(record) => record.isTotal ? 'ant-table-row-selected' : ''}
            />
            
            <div style={{ marginTop: 16, fontSize: 14, color: '#6b7280' }}>
              <Paragraph style={{ margin: 0 }}>
                <InfoCircleOutlined style={{ marginRight: 4 }} />
                完成率计算方式：（总排班次数 - 已取消未补排次数）/ 总排班次数 × 100%
              </Paragraph>
              <Paragraph style={{ marginTop: 4, marginBottom: 0 }}>
                <ExclamationCircleOutlined style={{ marginRight: 4 }} />
                数据统计范围：{dateRange[0].format('YYYY年MM月DD日')} - {dateRange[1].format('YYYY年MM月DD日')}，包含所有服务项目排班记录
              </Paragraph>
            </div>
          </div>
        </Spin>
      </div>

      {/* 底部操作按钮 */}
      <div 
        style={{ 
          padding: 16, 
          borderTop: '1px solid #e5e7eb', 
          display: 'flex', 
          justifyContent: 'flex-end', 
          gap: 12,
          backgroundColor: '#f9fafb'
        }}
      >
   
      </div>
    
     </div>
  );
};

export default HistoryStatsModal;
